<?php
	header('Content-Type:text/html;charset=UTF-8');
?>
<!--页面顶部 top-box-->
	<div id="top">
	<!--亲，请登录-->
		<div class="top_head">
			<ul class="top_left lf">
				<li class="landing"><span>您好，欢迎来到喵喵</span><a href="#" id='login'>[登录]</a><a href="register.html">免费注册</a></li>
				<!--<li></li>-->
				<li><a href="#">手机逛喵喵</a></li>
			</ul>
			<p class="mmsy lf"><a href="index.html" target='_block'>喵喵首页</a></p>
			<ul class="top_center lf">
				<li><a href="usercenter.html">我的喵喵</a></li>
				<li><a href="shoppingcart.html" target='_blank'>购物车</a></li>
				<li><a href="#">收藏夹</a></li>
			</ul>
			<p class="lf"><a href="#">商品分类</a></p>
			<ul class="top_right rt">

				<li class='service'>
					<b></b><a>联系客服</a><img src="img/jt_down.jpg">
					<ul id="service_items">
						<li><a href="#">帮助中心</a></li>
						<li><a href="#">售后服务</a></li>
						<li><a href="#">在线客服</a></li>
						<li><a href="#">投诉中心</a></li>
						<li><a href="#">客服邮箱</a></li>
					</ul>
				</li>
				<li><a href="#">卖家中心</a></li>
				<li><a href="#" id='quit'>退出登录</a></li>
			</ul>
		</div>
	</div>

<!--搜索本店宝贝-->
	<div id='search_info'>
		<div id="settle_up" class='rt'>去购物车结算<b></b></div>
		<div id="my_mm" class='rt'>我的喵喵<b></b></div>
		<div id="top_search">
			<input id="txtSearch" placeholder='搜搜书' autofocus />
			<button>搜索本店宝贝</button>
            <div id='suggest'>
                <ul>
                </ul>
            </div>
		</div>
	</div>

<script>
	/**************todo 登陆******************/
	$("#login").click(function(){
		//TODO 显示用户登录框
		$(".modal").css('display','block');
		console.log('点击登陆啦');
		//TODO 阻止<a>标签的默认行为
		return false;
	});
	//todo 切换到用户中心页面
	$('#my_mm').click(function(){
		location.href='usercenter.html';
	});
	//todo 切换到我的购物车
	$('#settle_up').click(function(){
		location.href='shoppingcart.html';
	});


	/**********todo 联系客服下拉菜单**********/

    //定义函数showSub
    	var showSub=function(){
    		//找到id为_items结尾的元素，设置其显示
    		$('#service_items').css('display','block');
    		//查找当期那元素下的直接子元素a，设置其class为hover
    		$('.top_right li.service>a').addClass('hover');
    	}
    	//定义函数hideSub
    	var hideSub=function(){
    		//找到id为_items结尾的元素，设置其隐藏
    		$('#service_items').css('display','none');
    		//查找当期那元素下的直接子元素a，清除其class
    		$('.top_right li.service>a').removeClass('hover');
    	}
    	//为class为service的元素绑定鼠标进入事件showSub
    	$('li.service').on('mouseover',showSub);
    	//为class为service的元素绑定鼠标移除事件hideSub
    	$('li.service').on('mouseout',hideSub);
    
    
    /******************异步加载关键字*****************/
  
    txtSearch.onkeyup=function(){
			var k=this.value;
			console.log(k);
			if(!k){return;}
        $.get('data/5_search_kw.php?kw='+k,function(data){
        	var ul=document.querySelector('#suggest ul');
            	ul.innerHTML=data;
				ul.style.display='block';
        });
			
	};
    
    
    
    
    
    
    
    
    
    
    

</script>